<template>
	<view style="width: 100%;height: 300rpx;" id="danmaku">
		<VueDdanMuku ref="danmuRef" :container="container" :list="danmuList" :loop="loop"></VueDdanMuku>
	</view>
</template>

<script setup>
import { nextTick, onMounted, ref } from 'vue'
import VueDdanMuku from '@/components/Danmuku/sv-danmaku-track.vue'

const loop = ref(true)
const danmuRef = ref(null)
const danmuList = ref([
	{ img: "https://picsum.photos/200?1", text: "1" },
	{ img: "https://picsum.photos/200?2", text: "2" },
	{ img: "https://picsum.photos/200?3", text: "3" },
	{ img: "https://picsum.photos/200?4", text: "4" },
	{ img: "https://picsum.photos/200?5", text: "5" },
	{ img: "https://picsum.photos/200?6", text: "6" },
	{ img: "https://picsum.photos/200?7", text: "7" },
	{ img: "https://picsum.photos/200?8", text: "8" },
	{ img: "https://picsum.photos/200?9", text: "9" },
	{ img: "https://picsum.photos/200?10", text: "10" },
	{ img: "https://picsum.photos/200?11", text: "11" },
	{ img: "https://picsum.photos/200?12", text: "12" },
	{ img: "https://picsum.photos/200?13", text: "13" },
	{ img: "https://picsum.photos/200?14", text: "14" },
	{ img: "https://picsum.photos/200?15", text: "15" },
	{ img: "https://picsum.photos/200?16", text: "16" },
	{ img: "https://picsum.photos/200?17", text: "17" },
	{ img: "https://picsum.photos/200?18", text: "18" },
	{ img: "https://picsum.photos/200?19", text: "19" },
	{ img: "https://picsum.photos/200?20", text: "20" }
])

const container = ref({})

onMounted(() => {
	nextTick(() => {
		const query = uni.createSelectorQuery()
		query
		  .select('#danmaku')
		  .boundingClientRect((data) => {
		    const { width, height } = data
		    container.value = {
		      width,
		      height
		    }
		  })
		  .exec()
		danmuRef.value.createTimer()
	})
})
	
</script>

<style>
</style>